<template>
    <div>
        <div id="teacherClassTable" v-if="role === 'teacher'">
            <el-table
                :data="courselist"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="课程名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="credit"
                    label="学分"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="teacherId"
                    label="授课老师id">
                </el-table-column>
                <el-table-column
                    prop="classTime"
                    label="上课时间">
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="类型"
                  width="100"
                  :filters="[{ text: '考试', value: '1' }, { text: '考察', value: '0' }]"
                  :filter-method="filterTag"
                  filter-placement="bottom-end">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.type == '1' ? 'primary' : 'success'"
                      disable-transitions>{{scope.row.type == '1' ? '考试' : '考察'}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button @click="courseDetail(scope.row.id)" type="text" size="small">查看选课学生</el-button>

                    <el-dialog title="选课学生" :visible.sync="dialogTableVisible">
                    <!-- <span>课程名{{ detail.course.name }}</span> -->
                      <el-table
                          :data="detail.student"
                          v-loading="loading"
                          style="width: 100%">
                          <el-table-column
                              prop="id"
                              label="ID"
                              width="180">
                          </el-table-column>
                          <el-table-column
                              prop="account"
                              label="账号"
                              width="180">
                          </el-table-column>
                          <el-table-column
                              prop="name"
                              label="姓名">
                          </el-table-column>
                      </el-table>
                    </el-dialog>
                  </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="studentClassTable" v-if="role === 'student'">
          <el-table
                :data="courseRecord"
                style="width: 100%">
                <el-table-column
                    prop="course.name"
                    label="课程名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="course.credit"
                    label="学分"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="teacher.name"
                    label="授课老师">
                </el-table-column>
                <el-table-column
                    prop="course.classTime"
                    label="上课时间">
                </el-table-column>
                <el-table-column
                  prop="course.type"
                  label="类型"
                  width="100"
                  :filters="[{ text: '考试', value: '1' }, { text: '考察', value: '0' }]"
                  :filter-method="filterTag"
                  filter-placement="bottom-end">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.type == '1' ? 'primary' : 'success'"
                      disable-transitions>{{scope.row.type == '1' ? '考试' : '考察'}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button type="danger" @click="cancleSelectCourse(scope.row.course.id)">退课</el-button>
                  </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<style lang="less">

</style>

<script>
import { courseDetail, getCourseListByTeacherId, getRecordByStudentId } from '@/api/couser'
import { getInfo } from '@/utils/storage'
import { Message } from 'element-ui'

export default {
  data () {
    return {
      detail: [],
      role: getInfo().role,
      dialogTableVisible: false,
      courselist: [],
      courseRecord: []
    }
  },
  methods: {
    filterTag (value, row) {
      return row.type === value
    },
    cancleSelectCourse (courseId) {
      Message.warning('退课成功 ' + courseId)
    },
    async courseDetail (courseId) {
      this.dialogTableVisible = true
      this.detail = (await courseDetail(courseId)).data
      console.log(this.detail)
    }
  },
  mounted: async function () {
    this.user = getInfo()
    if (this.user.role === 'teacher') {
      this.courselist = (await getCourseListByTeacherId(this.user.id)).data
    } else if (this.user.role === 'student') {
      this.courseRecord = (await getRecordByStudentId(this.user.id)).data
    }
  }
}
</script>
